<template>
	<view class="login-page">
		<!-- <view class="header">
			<view class="h1">账号登陆</view>
			<view class="English-h1">Please enter your accout below</view>
		</view> -->
		<div class="logo-img">
			<!-- <image class="logo1" src="/static/img/login/logo.png"></image>
			<image class="logo2" src="/static/img/login/logo1.png"></image> -->
			<text class="text">您好，请登录～</text>
		</div>


		<view class="content">
			<view class="tabs">
			<view class="tab" style="margin-right: 100rpx;" @click="currentTab = 0">
				<view class="text">账号/密码登录</view>
				<view class="line" v-if="currentTab == 0"></view>
			</view>
			<view class="tab" @click="currentTab = 1">
				<view class="text">密钥登录</view>
				<view class="line" v-if="currentTab == 1"></view>
			</view>
		   </view>
			<view class="user form">
				<!-- <view class="icon">
					<image src="/static/img/login/yonghu.png"></image>
				</view> -->
				<uv-input placeholder="请输入账号" v-model="userName"  color="#000" type="number" :clearable="false" 
					:adjustPosition="false" @input="userNameHandleInput"  :maxlength="11" ></uv-input>
			</view>
			<view class="form password" v-if="currentTab == 0">
				<!-- <view class="icon">
					<image src="/static/img/login/mima.png"></image>
				</view> -->
				<uv-input placeholder="请输入密码" v-model="loginPwd" :type="showPassword ? 'password' : 'text'" color="#000"
					:clearable="false" :adjustPosition="false"></uv-input>
				<view class="icon1" @click="showPassword = !showPassword">
					<image src="/static/img/login/hide.png"></image>
				</view>
			</view>
			<view class="form password" v-if="currentTab == 1">
				<!-- <view class="icon">
					<image src="/static/img/login/mima.png"></image>
				</view> -->
				<uv-input placeholder="请输入密钥" v-model="secretKey" :type="showPassword ? 'password' : 'text'"
					color="#000" :clearable="false" :adjustPosition="false"></uv-input>
				<view class="icon1" @click="showPassword = !showPassword">
					<image src="/static/img/login/hide.png"></image>
				</view>
			</view>
			<view class="forget-password">
				<!-- <view class="remeber" @click="checkboxPassword">
					<image style="width: 28rpx;height: 28rpx;margin-right: 12rpx" v-if="ischeckPassword"
						src='../../static/img/select-true.png' mode=""></image>
					<image style="width: 28rpx;height: 28rpx;margin-right: 12rpx" v-else
						src='../../static/img/select-false.png' mode=""></image>
					<text style="color: #000;font-size: 24rpx;">记住密码</text>
				</view> -->
				<view class="forget" @click="forgetPw">忘记密码？</view>
			</view>
			<button class="submit" :style="{opacity: isClick ? 1 : 0.5}"
				@click="login">立即登录</button>
			<view
				style="font-size: 26rpx; color: #000; margin-top: 36rpx;display: flex;align-items: center;margin-bottom: 42rpx;">
				<image style="width: 35rpx;height: 35rpx;margin-right: 12rpx" v-if="ischeckbox"
					src='../../static/img/select-true.png' mode="" @click="checkboxSelect(ischeckbox)"></image>
				<image style="width: 35rpx;height: 35rpx;margin-right: 12rpx" v-else
					src='../../static/img/select-false.png' mode=""  @click="checkboxSelect(ischeckbox)"></image>
				<text @click="checkboxSelect(ischeckbox)">我已阅读并同意 </text>

				<text style="color: #242e6b" @click="staticContentPage('用户协议')">《用户协议》</text>

				<text>与</text>

				<text style="color: #242e6b" @click="staticContentPage('隐私条款')">《隐私政策》</text>
			</view>

			<view class="foot-register">
				还没有账号？
				<view class="btn link" @click="registerPage">立即注册</view>
			</view>
		</view>
	</view>
</template>

<script>
	const lineBg = '/st'
	export default {
		data() {
			return {
				appInfo: '',
				userName: '',
				loginPwd: '',
				secretKey: '',
				googleVerCode: '',
				currentTab: 0,
				showPassword: false,
				ischeckbox: false,
				ischeckPassword: false,
				customerServiceUrl:''

			}
		},
		onLoad() {
			this.getAppInfo();
			this.getCustomerServiceUrl();
		},
		computed: {
			isClick() {
				return this.ischeckbox;
			}
		},
		methods: {
			forgetPw(){
				var that = this;
				uni.navigateTo({
					url: '/pages/webview/webview?url=' + that.customerServiceUrl
				});
			},
			getCustomerServiceUrl() {
			var that = this;
			uni.$uv.http.get('/setting/getCustomerServiceUrl').then(res => {
					that.customerServiceUrl = res.data;
				});
			},
			userNameHandleInput(value) {
     		  // 正则表达式，用于匹配中国大陆的11位手机号
    		  const regex = /^1[3-9]\d{9}$/;
    		  // 替换掉非手机号的字符
   			  this.userName = value.replace(/^\d+$/g, '');
    		  // 如果当前输入的值不符合手机号格式，则不更新userName
  		 	 if (!regex.test(this.userName)) {
     		   this.userName = this.userName.slice(0, -1);
    		  }
  			},
			staticContentPage(title) {
				uni.navigateTo({
					url: '../staticContent/staticContent?title=' + title
				});
			},

			checkboxSelect() {
				this.ischeckbox = !this.ischeckbox
			},
			checkboxPassword() {
				this.ischeckPassword = !this.ischeckPassword
			},

			getAppInfo() {
				var that = this;
				uni.$uv.http.get('/setting/getAppInfo').then(res => {
					that.appInfo = res.data;
				});
			},

			forgetLoginPwdPage() {
				uni.navigateTo({
					url: '../forgetLoginPwd/forgetLoginPwd'
				});
			},

			registerPage() {
				uni.navigateTo({
					url: '../register/register'
				});
			},

			login() {
				var that = this;
				if (!that.ischeckbox) {
					uni.showToast({
						title: "请勾选我已阅读同意",
						icon: "none"
					});
					return;
				}
				if (that.userName === null || that.userName === "") {
					uni.showToast({
						title: "请输入账号",
						icon: "none"
					});
					return;
				}
				if (that.currentTab === 0) {
					if (that.loginPwd === null || that.loginPwd === "") {
						uni.showToast({
							title: "请输入密码",
							icon: "none"
						});
						return;
					}
				} else {
					if (that.secretKey === null || that.secretKey === "") {
						uni.showToast({
							title: "请输入密钥",
							icon: "none"
						});
						return;
					}
				}
				uni.$uv.http.post('/login', {
					loginWay: that.currentTab === 0 ? '1' : '2',
					userName: that.userName,
					loginPwd: that.loginPwd,
					secretKey: that.secretKey
				}).then(res => {
					var tokenInfo = res.data;
					uni.setStorageSync('tokenName', tokenInfo.tokenName);
					uni.setStorageSync('tokenValue', tokenInfo.tokenValue);
					uni.reLaunch({
						url: "../home/home"
					});
				});
			},

		}
	}
</script>

<style scoped lang="less">
body {
	height: auto !important;
	background-color: #f8f9fd!important;
	background: url(/static/img/my_bg4.png) no-repeat;
}
	image {
		display: block;
		width: 100%;
		height: 100%;
	}

	.login-page {
		background: rgba(0, 0, 0, 0);

		.content {
			width: 694rpx;
			margin: 0 auto;
			/* 自动布局 */
			display: flex;
			flex-direction: column;
			padding: 56rpx;
			background-color:#FFF;
			border-radius: 10px;
			box-sizing: border-box;

			.form {
				width: 100%;
				height: 88rpx;
				border-radius: 10rpx;
				background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), rgba(255, 255, 255, 0.05);
				margin-bottom: 42rpx;
				display: flex;
				align-items: center;

				.icon {
					width: 24rpx;
					height: 28rpx;
					margin-left: 28rpx;
				}

				.icon1 {
					width: 35rpx;
					height: 28rpx;
					margin-right: 29rpx;
				}
			}

			.user {
				border: 1px solid #bebbc5;
			}
			.password{
				border: 1px solid #bebbc5;
			}
		}
	}

	.header {
		padding-top: 175rpx;
		text-align: center;

		.h1 {
			font-size: 46rpx;
			font-weight: bold;
		}

		.English-h1 {
			color: #bebbc5;
			margin-top: 25rpx;
		}

	}

	.logo-img {
		margin: 130rpx auto;
		display: flex;
		align-items: left;
		flex-direction: column;
		margin-left: 50rpx;

		.logo1 {

			width: 340rpx;
			height: 340rpx;
			margin-left: -40rpx;
			position: relative;
			z-index: 2;
		}

		.logo2 {
			width: 108rpx;
			height: 70rpx;
			margin-top: -30rpx;
			position: relative;
			z-index: 1;
		}

		.text {
			color: #FFF;
			font-size: 34rpx;
		}


	}

	.tabs {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		color: #000;
		margin-bottom: 50rpx;

		.tab {
			height: 60rpx;
			position: relative;
		}

		.line {
			position: absolute;
			bottom: 0;
			left: -10%;
			width: 120%;
			height: 4rpx;
			border-radius: 4rpx;
			background: #242e6b;
		}
	}

	.xieyi {
		font-size: 24rpx;
		color: #9CA3AF;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 42rpx;
	}

	.uv-form {
		padding: 0px 67rpx;
		box-sizing: border-box;
	}

	.uv-input {
		border: 0px solid #9CA3AF !important;

	}

	/deep/ .uni-input-input {
		font-size: 28rpx !important;
	}

	/deep/ .uni-input-placeholder {
		font-size: 28rpx !important;
	}

	/deep/ .uv-checkbox__icon-wrap--square {
		background-color: transparent !important;
	}

	.foot-img {
		width: 100%;
		z-index: -1;
		height: 189rpx;

		image {
			width: 100%;
			height: 189rpx;

		}
	}

	.foot-register {
		text-align: center;
		font-size: 24rpx;
		z-index: 0;
		color: #9CA3AF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit {
		width: 100%;
		background: #242e6b;
		color: #fff;
		border: 0px;
		border-radius: 116rpx;
		height: 91rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0px auto;
		font-size: 30rpx;
		margin-bottom: 26rpx;
	}

	.forget-password {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 42rpx;

		.remeber {
			display: flex;
			align-items: center;
		}

		.forget {
			color: #000;
			font-size: 24rpx;
		}
	}

	.link {
		color: #242e6b;
	}

	.uni-input-placeholder {
		font-size: 28rpx;
	}

	.foot-tbody {
		position: relative;
		height: 189rpx;

		.foot-img {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 100%;
			height: 100%;
		}
	}
</style>